<template>
	<div v-if="error">{{ error }}</div>
	<div v-else-if="loading">
		<h1>数据拼命加载中...</h1>
	</div>
	<div v-else>
		<el-input placeholder="请搜索内容" v-model="wd" @change="handleChange">
			<template #append>
				<el-button>搜索</el-button>
			</template>
		</el-input>
		<el-button type="danger" v-show="deleteIDs.length" @click="handleClickDelete(deleteIDs.join(','))">批量删除</el-button>
		<el-table :data="list" @selection-change="handleSelectionChange">
			<el-table-column type="selection"></el-table-column>
			<el-table-column prop="id" label="ID"></el-table-column>
			<el-table-column prop="title" label="标题"></el-table-column>
			<el-table-column prop="name" label="姓名"></el-table-column>
			<el-table-column prop="age" label="年龄"></el-table-column>
			<el-table-column prop="address" label="地址"></el-table-column>
			<el-table-column prop="sex" label="性别"></el-table-column>
			<el-table-column prop="email" label="=邮箱"></el-table-column>
			<el-table-column prop="tel" label="电话"></el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-button size="small" @click="handleClickModify(scope.row)">编辑</el-button>
					<el-button size="small" type="danger" @click="handleClickDelete(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :default-current-page="route.query.pageCode && +route.query.pageCode " background
			layout="prev, pager, next" :total="total" @current-change="handleChangePageCode" />

		<el-dialog v-model="dialogVisible" title="Tips" width="30%">
			<div>
				<el-row class="row">
					<el-col :span="2">ID:</el-col>
					<el-col :span="22">
						<el-input v-model="form.id" disabled></el-input>
					</el-col>
				</el-row>
				<el-row class="row">
					<el-col :span="2">标题:</el-col>
					<el-col :span="22">
						<el-input v-model="form.title"></el-input>
					</el-col>
				</el-row>
				<el-row class="row">
					<el-col :span="2">姓名:</el-col>
					<el-col :span="22">
						<el-input v-model="form.name"></el-input>
					</el-col>
				</el-row>
				<el-row class="row">
					<el-col :span="2">年龄:</el-col>
					<el-col :span="22">
						<el-input v-model="form.age"></el-input>
					</el-col>
				</el-row>
				<el-row class="row">
					<el-col :span="2">地址:</el-col>
					<el-col :span="22">
						<el-input v-model="form.address"></el-input>
					</el-col>
				</el-row>
				<el-row class="row">
					<el-col :span="2">性别:</el-col>
					<el-col :span="22">
						<el-radio-group v-model="form.sex">
							<el-radio label="男" size="large">男</el-radio>
							<el-radio label="女" size="large">女</el-radio>
						</el-radio-group>
					</el-col>
				</el-row>
				<el-row class="row">
					<el-col :span="2">邮箱:</el-col>
					<el-col :span="22">
						<el-input v-model="form.email"></el-input>
					</el-col>
				</el-row>
				<el-row class="row">
					<el-col :span="2">电话:</el-col>
					<el-col :span="22">
						<el-input v-model="form.tel"></el-input>
					</el-col>
				</el-row>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">Cancel</el-button>
					<el-button type="primary" @click="handleClickEdit">Confirm</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessageBox, ElMessage } from 'element-plus'

interface ListItem {
	"id": string,
	"title": string,
	"name": string,
	"age": number,
	"address": string,
	"sex": "男" | "女",
	"email": string,
	"tel": string,
}

const route = useRoute()
const router = useRouter()

const list = ref<ListItem[]>([])
const error = ref<null | string>(null)
const loading = ref(true)
const total = ref(0)
const wd = ref('')
const deleteIDs = ref<string[]>([])

// 请求列表
const fetchList = async () => {
	const { pageCode } = route.query
	try {
		const resp = await axios.get('/api/list', {
			params: {
				pageCode,
				wd: wd.value
			}
		})
		list.value = resp.data.data
		total.value = resp.data.total
		loading.value = false
	} catch (e: any) {
		loading.value = false
		error.value = e.message
	}
}
// 页码改变函数
const handleChangePageCode = (newPageCode: number) => {
	// 路由跳转
	router.push({
		path: '/list/manage',
		query: {
			...route.query,
			pageCode: newPageCode
		}
	})
}
// 处理删除
const handleClickDelete = (id: string) => {
	// 二次确认
	ElMessageBox.confirm(
		"确认要删除该项数据吗?",
		"警告",
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}
	).then(async () => {
		const resp = await axios.delete('/api/list/' + id);
		const { code, message } = resp.data;
		if (code === 200) {
			fetchList();
			ElMessage({
				message,
				type: 'success',
			})
		}
	}).catch(() => {
		ElMessage('取消删除！！')
	})
}
// 处理选中发生改变
const handleSelectionChange = (selection: ListItem[]) => {
	deleteIDs.value = selection.map(v => v.id)
}
// 处理搜索内容改变 =>  回车
// 处理搜索内容改变 =>  失去焦点
const handleChange = () => {
	router.push({
		path: '/list/manage',
		query: {
			...route.query,
			wd: wd.value
		}
	})
}

// 侦听路由
watch(route, () => {
	// 重新请求数据
	fetchList()
})

// 声明周期
onMounted(() => {
	fetchList()
})


/******************************** 编辑 *******************************************/
const dialogVisible = ref(false)

const form = ref<ListItem>({
	"id": '1',
	"title": '2',
	"name": '3',
	"age": 4,
	"address": '5',
	"sex": "男",
	"email": '6',
	"tel": '7',
})

// 编辑点击事件
const handleClickModify = (row: ListItem) => {
	dialogVisible.value = true
	// 克隆一份
	form.value = { ...row }
}

// 确定修改事件
const handleClickEdit = async () => {
	const resp = await axios.post('/api/list/edit', form.value)
	const { code, message } = resp.data;
	if(code === 200) {
		ElMessage({ type: 'success', message })
		fetchList()
		dialogVisible.value = false
	}
}
</script>

<style scoped>
.row {
	display: flex;
	align-items: center;
	margin: 4px 0;
}
</style>